<template>
	<Header />
	<div class="ele-admin-main" style="background-color: #f1f1f1;">
		<div class="ele-admin-body">
			<div class="ele-admin-content">
				<div class="ele-admin-content-view">
					<div class="ele-body" style="margin-left: 300px;margin-right: 300px;">
						<!-- 首页轮播图 -->
						<a-carousel autoplay>
							<div><img style="width: 100%;height: 400px;" src="../../assets/image/banner_1.jpg"></div>
							<div><img style="width: 100%;height: 400px;" src="../../assets/image/banner_2.jpg"></div>
							<div><img style="width: 100%;height: 400px;" src="../../assets/image/banner_3.jpg"></div>
							<div><img style="width: 100%;height: 400px;" src="../../assets/image/banner_4.jpg"></div>
						</a-carousel>
						<div style="margin-top: 10px;">
							<a-card title="所有门票">
								<a-list :grid="{ column: 4 }" item-layout="vertical" size="large"
									:pagination="pagination" :data-source="dataList" style="margin: -10px;">
									<template #renderItem="{ item }">
										<a-card hoverable style="margin: 10px;">
											<template #cover>
												<img height="240" :src="item.image"
													style="padding: 15px 15px 0px 15px;" />
											</template>
											<a-card-meta :title="item.name">
												<template #description>
													<a-typography-paragraph style="font-size:15px;line-height: 1.75;"
														type="secondary" :ellipsis="{ rows: 2 }"
														:content="item.description.replace(/(<([^>]+)>)/ig, '')" />
												</template>
											</a-card-meta>
											<template #actions>
												<a-button @click="chakan(item)">查看详情</a-button>
												<a-popconfirm title="确定要预定此门票吗?" ok-text="确定" cancel-text="取消"
													@confirm="confirm(item)" @cancel="cancel">
													<a-button type="primary">立即预定</a-button>
												</a-popconfirm>

											</template>
										</a-card>
									</template>
								</a-list>
							</a-card>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<TicketChakan v-model:visible="showEdit" :data="current" />
</template>

<script lang="ts" setup>
	import {
		onMounted,
		ref,
		watch,
		reactive
	} from 'vue';
	import {
		message
	} from 'ant-design-vue';
	import {
		useRoute
	} from "vue-router";
	import Header from './header.vue';
	import {
		pageTickets
	} from '@/api/neirong/ticket';
	import type {
		Ticket
	} from '@/api/neirong/ticket/model';
	import TicketChakan from './ticket/ticket-chakan.vue';
	import {
		addCart
	} from '@/api/neirong/cart';
	import {
		useUserStore
	} from '@/store/modules/user';
	import type {
		Cart
	} from '@/api/neirong/cart/model';
	// 获取用户存储
	const userStore = useUserStore();

	const route = useRoute();
	const showEdit = ref(false);

	// 表单数据
	const form = reactive<Cart>({
		id: undefined,
		name: '',
		type: '',
		price: '',
	});

	// 当前编辑数据
	const current = ref<Ticket>();

	const chakan = (row ?: Ticket) => {
		current.value = row;
		showEdit.value = true;
	};

	// 查询参数
	const queryParam = ref({
		'page': 1,
		'limit': 8,
		'name': '',
	});

	const dataList = ref<Ticket[]>([]);

	onMounted(() => {
		queryTicketPage(queryParam.value);
	})

	const queryTicketPage = (queryParam : any) => {
		pageTickets(queryParam).then((res) => {
			dataList.value = res.list
			pagination.value.total = res.count
		})
	}

	const confirm = (row ?: Ticket) => {
		if (userStore.info) {
			form.name = row.name;
			form.price = row?.price;
			form.type = '门票';
			addCart(form).then((msg) => {
				message.success(msg);
			})
				.catch((e) => {
					message.error(e.message);
				});
		} else {
			message.error("请先登录！");
		}

	};

	const cancel = () => {
		return
	};

	// 分页配置
	const pagination = ref({
		total: 0,
		current: 1,
		pageSize: 8,
		// 改变每页数量时更新显示
		onChange: (current : any, size : any) => {
			// 分页点击后更新
			pagination.value.current = current;
			pagination.value.pageSize = size;
			// 赋值分页参数
			queryParam.value.page = current;
			queryParam.value.limit = size;
			pageTickets(queryParam.value).then((res) => {
				dataList.value = res.list
				pagination.value.total = res.count
			})
		}
	});
</script>

<script lang="ts">
	import {
		defineComponent
	} from 'vue';

	export default defineComponent({
		name: 'TicketIndex'
	});
</script>